import React,{useState} from 'react'
import {Button, InputItem, List} from "antd-mobile";
import {showToast} from "../../../components/MyToast/MyToast";
import {nanoid} from "nanoid";
import {RouteComponentProps,withRouter} from "react-router-dom";
import signUp,{ISignUp} from "../../../network/socket/signUp";
interface IEvent {
    value: string;
    [props: string]: any
}

const Reg = (props: RouteComponentProps) => {
    const [uEmail,setEmail] = useState('')
    const [emailHasError,setEmailError] = useState(false)
    const [uNickName,setNickName] = useState('')
    const [nickNameHasError,setNickNameError] = useState(false)
    const [uPwd,setPwd] = useState('')
    const [pwdHasError,setPwdError] = useState(false)
    const [cfPwd,setCfPwd] = useState('')
    const [cfHasError,setCfError] = useState(false)
    const inputEmail = (e: React.KeyboardEvent) => {
        setEmail((e.target as unknown as IEvent).value)
    }
    const inputNickName = (e: React.KeyboardEvent) => {
        setNickName((e.target as unknown as IEvent).value)
    }
    const inputPwd = (e: React.KeyboardEvent) => {
        setPwd((e.target as unknown as IEvent).value)
    }
    const inputCfPwd = (e: React.KeyboardEvent) => {
        setCfPwd((e.target as unknown as IEvent).value)
    }
    const checkEmail = () => {
        //邮箱输入框失去焦点触发验证
        const reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
        if(!reg.test(uEmail)){
            setEmailError(true)
        }else{
            setEmailError(false)
        }
    }
    const checkNick = () => {
        if(!uNickName){
            setNickNameError(true)
        }else{
            setNickNameError(false)
        }
    }
    const checkPwd = () => {
        if(!uPwd){
            setPwdError(true)
        }else{
            setPwdError(false)
        }
    }
    const checkCf = () => {
        if(!cfPwd){
            setCfError(true)
        }else if(cfPwd !== uPwd){
            setCfError(true)
        }else{
            setCfError(false)
        }
    }
    //点击注册功能
    const regBtn = () => {
        checkEmail();checkNick();checkPwd();checkCf()
        if(!emailHasError && !nickNameHasError && !pwdHasError && !cfHasError){
            signUp({uUid: nanoid(5),uEmail,uNickName,uPwd})
                .then(res => {
                    if((res as unknown as ISignUp).code === 200){
                        showToast({type: 'success',content: '注册成功'})
                        props.history.go(0)
                    }else{
                        showToast({type: 'fail',content: '注册失败'})
                    }
                })
                .catch(err => {
                    showToast({type: 'fail',content: err})
                })
            showToast({type: 'success',content: '注册成功'})
        }else {
            showToast({type: 'fail',content: '请输入正确的信息后再注册'})
        }
    }
    return (
        <div>
            <List renderHeader={() => '请填写注册信息'}>
                <InputItem
                    error={emailHasError}
                    onErrorClick={() => showToast({type: 'fail',content: '请输入正确的邮箱'})}
                    onBlur={checkEmail}
                    placeholder="请输入您的邮箱账号"
                    onKeyUp={inputEmail}
                >邮箱账号</InputItem>
                <InputItem
                    error={nickNameHasError}
                    type='text'
                    onErrorClick={() => showToast({type: 'fail',content: '昵称不能为空'})}
                    onBlur={checkNick}
                    placeholder="请输入您的昵称"
                    onKeyUp={inputNickName}
                >昵称</InputItem>
                <InputItem
                    error={pwdHasError}
                    type='password'
                    onErrorClick={() => showToast({type: 'fail',content: '密码不能为空'})}
                    onBlur={checkPwd}
                    placeholder="请输入您的密码"
                    onKeyUp={inputPwd}
                >密码</InputItem>
                <InputItem
                    error={cfHasError}
                    type='password'
                    onErrorClick={() => showToast({type: 'fail',content: '两次密码不一致'})}
                    onBlur={checkCf}
                    placeholder="请确认您的密码"
                    onKeyUp={inputCfPwd}
                >确认密码</InputItem>
            </List>
            <Button size="small" style={{width: '75px',margin: '10px auto'}} onClick={regBtn}>注册</Button>
        </div>
    )
}

export default withRouter(Reg)